
<template>
  <div>
    <van-nav-bar title="医生详情" left-text="返回" left-arrow @click="onClickLeft" />
    <div class="expert">
      <div class="expert-top">
        <div class="expert-top-shi">
          <div class="expert-top-shi-left">已通过实名认证</div>
          <div class="expert-top-shi-right">执业资质已审核通过</div>
        </div>
        <div class="expert-top-text">
          <div class="expert-top-text-name">
            <p>
              <span class="shi">{{ docter.name }}</span>
              <span class="zhi">
                <img src="../../assets/img/知名.png" alt="" />
                知名专家
              </span>
            </p>
            <p>
              <span>{{ docter.clinic_name }}</span>
              <span>{{ docter.title }}</span>
            </p>
            <p>
              <span class="san">三甲</span>
              <span>{{ docter.hospital_name }}</span>
            </p>
            <p>
              <span>
                <b>{{ docter.good_rate }}</b>
                <van-icon name="star" color="#fdb206" />
              </span>
              |
              <span>
                {{ docter.service_data_list[1].name }}
                <b>{{ docter.reply_num }}</b>
              </span>
              |
              <span>
                {{ docter.service_data_list[2].name }}
                <b>{{ docter.solution_score_desc }}</b>
              </span>
            </p>
          </div>
          <div class="expert-top-text-img">
            <img :src="docter.image" alt="" />
            <button v-if="guan" @click="guan = false">+关注</button>
            <button v-else @click="guan = true">已关注</button>
          </div>
        </div>
        <div class="expert-top-bth">
          <span class="ban">{{ docter.new_tags[0].name }}</span>
          <span class="ban">科室全国第3</span>
          <!-- <span class="ben">{{ docter.ad_tag.name }}</span> -->
          <span>{{ docter.new_tags[1].name }}</span>
          <span>{{ docter.new_tags[2].name }}</span>
          <span>{{ docter.new_tags[3].name }}</span>
          <span>{{ docter.new_tags[4].name }}</span>
          <span>专业有效</span>
        </div>
      </div>
      <div class="expert-top-an">
        <span>
          <img src="../../assets/img/图.png" alt="" />
          <span>保证医生真实</span>
          
        </span>
        <span>
          <img src="../../assets/img/图2.png" alt="" />
          <span> 未使用随时退</span>
         
        </span>
        <span>
          <img src="../../assets/img/图3.png" alt="" />
          <span> 不满意可申诉</span>
        </span>
      </div>
      <div class="expert-top-consult">
        <div class="expert-top-consult-text" @click="look = true">
          <img src="../../img/w1.jpg" alt="" />
          <div>图文咨询</div>
          <div class="text-pan">￥96元/次</div>
        </div>

        <div class="expert-top-consult-text" @click="look = false">
          <img src="../../img/w2.jpg" alt="" />
          <div>电话咨询</div>
          <div class="text-pan">￥178元/次</div>
        </div>

        <div class="expert-top-consult-tu">
          <img src="../../img/w3.jpg" alt="" />
          <div>视频问诊</div>
          <div class="text-pan">暂未开通</div>
        </div>

        <div class="expert-top-consult-tu">
          <img src="../../img/w4.jpg" alt="" />
          <div>预约就诊</div>
          <div class="text-pan">暂未开通</div>
        </div>
      </div>

      <van-collapse v-model="activeNames" v-if="look">
        <van-collapse-item
          title="通过文字、图片、语音与医生一对一在线沟通"
          icon="comment-circle"
          name="2">
          <div>
            <p>接诊后，咨询时效48小时，交互上限10次</p>
            <p>获得诊疗建议</p>
            <p>医生接诊前随时退款,超过24小时未接诊，自动退款</p>
            <p>服务说明></p>
          </div>
        </van-collapse-item>
      </van-collapse>

      <van-collapse v-model="activeNames" v-else>
        <van-collapse-item
          title="通过电话与医生进行选定时长的沟通，可添加病情资料及图片"
          icon="comment-circle"
          name="3">
          <div>
            <p>通话失败，本次咨询不收取费用</p>
            <p>意外挂断，可在规定时间内继续拨打</p>
            <p>服务说明></p>
          </div>
        </van-collapse-item>
      </van-collapse>

      <!-- <div class="expert-top-ditch">
        <van-collapse v-model="activeNames" >
          <van-collapse-item title="标题2"  icon="comment-circle">
            技术无非就是那些开发它的人的共同灵魂。
          </van-collapse-item>
        </van-collapse>
      </div> -->

      <div class="expert-top-good">
        <div class="expert-top-good-head">
          <span class="good-head-left">擅长与简介</span>
          <span class="good-head-right" @click="showPopup">查看全部></span>
        </div>
        <!-- 圆角弹窗（底部） -->
        <van-popup v-model:show="show" round position="bottom" :style="{ height: '70%' }">
          <h3>简介</h3>
          <p>专业擅长</p>
          <span v-html="docter.good_at"></span>
        </van-popup>

        <div class="expert-top-good-text">
          <p>
            <span v-html="docter.good_at"></span>
          </p>
        </div>
      </div>

      <div class="expert-top-you">
        <p class="ya">推荐理由</p>
        <div class="expert-top-you-text">
          <p>
            <van-icon name="star" color="#fdb206" />
            该院皮肤科全国排名第4
          </p>
          <p>
            <van-icon name="star" color="#fdb206" />
            从业37年，对重症座治疗拥有丰富的临床经验
          </p>
          <p>
            <van-icon name="star" color="#fdb206" />
            比患者还关心自己的病情的医生
          </p>
        </div>
      </div>

      <div class="expert-top-ask">
        <p class="ask-top">
          <span class="ask-left">患者评价</span>
          <span class="ask-right" @click="Gpad">查看全部></span>
        </p>

        <div class="top-ask-text">
          <div class="top-ask-text-shu">
            <span class="text-phone">133******3</span>
            <span class="text-tu">图文</span>
            <span class="text-man">满意</span>
            <span class="text-yun">11月20日</span>
          </div>
          <div class="top-ask-text-zi">
            <span>耐心细致</span>
            |
            <span>讲解很清楚</span>
            |
            <span>建议很有帮助</span>
          </div>
          <p class="top-ask-p">时医生，温柔细致，还会开导大人，避免焦虑，希望。。。</p>
          <div class="top-ask-text-wen">
            <p>问题描述:孩子刚5周，去年刚步入幼儿园有3次急性荨麻疹，治疗后痊愈...</p>
          </div>
        </div>

        <div class="top-ask-text">
          <div class="top-ask-text-shu">
            <span class="text-phone">133******3</span>
            <span class="text-tu">图文</span>
            <span class="text-man">满意</span>
            <span class="text-yun">11月20日</span>
          </div>
          <div class="top-ask-text-zi">
            <span>耐心细致</span>
            |
            <span>讲解很清楚</span>
            |
            <span>建议很有帮助</span>
          </div>
          <p class="top-ask-p">时医生，温柔细致，还会开导大人，避免焦虑，希望。。。</p>
          <div class="top-ask-text-wen">
            <p>问题描述:孩子刚5周，去年刚步入幼儿园有3次急性荨麻疹，治疗后痊愈...</p>
          </div>
        </div>
      </div>

      <div class="expert-top-tom">
        <div class="expert-top-tom-head">
          <span class="head-left">专家科普</span>
          <span class="head-right" @click="Toqbox">查看全部></span>
        </div>
        <div class="expert-top-tom-wen">
          <div class="expert-top-tom-text">
            <span>硬皮病的诊断标准及鉴别</span>
          </div>
          <div class="expert-top-tom-ta">
            <div class="tom-ta-left">
              <span>图文</span>
            </div>
            <div class="tom-ta-right">
              <span>阅读1800</span>
              <span>赞100</span>
            </div>
          </div>
        </div>

        <div class="expert-top-tom-wen">
          <div class="expert-top-tom-text">
            <span>硬皮病的诊断标准及鉴别</span>
          </div>
          <div class="expert-top-tom-ta">
            <div class="tom-ta-left">
              <span>图文</span>
            </div>
            <div class="tom-ta-right">
              <span>阅读1800</span>
              <span>赞100</span>
            </div>
          </div>
        </div>

        <div class="expert-top-tom-wen">
          <div class="expert-top-tom-text">
            <span>硬皮病的诊断标准及鉴别</span>
          </div>
          <div class="expert-top-tom-ta">
            <div class="tom-ta-left">
              <span>图文</span>
            </div>
            <div class="tom-ta-right">
              <span>阅读1800</span>
              <span>赞100</span>
            </div>
          </div>
        </div>
      </div>

      <div class="xinyi">
        <div class="xinyi1">
          <van-icon name="like" class="icon" />
          <p @click="mind">送心意</p>
        </div>
        <p class="btn" v-if="look" >图文咨询(￥96元/次)</p>
        <p class="btn"  v-else >电话咨询(￥178元/次)</p>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
const onClickLeft = () => history.back();

import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const activeNames = ref(['1']);
// 关注
const look = ref(false);
const guan = ref(true);
const show = ref(false);

const showPopup = () => {
  show.value = true;
};

const route = useRoute();
//传过的 字符串转换为相应的对象 然后存储在item变量中
const item = JSON.parse(route.query.item as string);

//获取后端 渲染数据
const docter = ref<any>([]);
docter.value = item.doctor_info;
console.log(docter.value);

//跳转页面
const Gpad = () => {
  router.push('/Gpad');
};

const Toqbox= () => {
  router.push('/Toqbox');
};


//跳送心意页面
const mind = () => {
  //  本地存储                   对象转换为 JSON 格式的字符串。
  localStorage.setItem('item', JSON.stringify(docter.value));
  router.push('/mind');
};





</script>
  
  <style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  font-size: 16px;
}

.expert {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  padding: 10px;
  .expert-top {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding-bottom: 20px;
    .expert-top-shi {
      height: 25px;
      width: 100%;
      background-color: #fbeac6;
      padding: 0 10px;
      line-height: 25px;

      .expert-top-shi-left {
        float: left;
        font-size: 13px;
      }
      .expert-top-shi-right{
        float: right;
        font-size: 13px;
      }
    }
    .expert-top-text {
      height: 130px;
      width: 100%;
      //   background-color: orange;
      padding: 10px;
      .expert-top-text-name {
        float: left;
        height: 100%;
        width: 75%;
        // background: orangered;
        p {
          height: 30px;
          width: 100%;
          // background-color:yellow;
          // border-bottom: 1px solid #000;
          line-height: 30px;
          span {
            // float: left;
            font-size: 12px;
            margin-right: 5px;
          }
          .shi {
            float: left;
            font-weight: bold;
            font-size: 22px;
          }
          .zhi {
            float: left;
            height: 20px;
            width: 80px;
            background-color: #ffe1ba;
            line-height: 20px;
            margin: 5px;
            font-weight: bold;
            color: #97612e;
            border-top-right-radius: 15px;
            border-bottom-left-radius: 15px;
            img {
              margin-left: 5px;
            }
          }
          .san {
            float: left;
            height: 15px;
            width: 30px;
            color: #fff;
            background-color: #1cc381;
            line-height: 15px;
            text-align: center;
            margin-top: 10px;
          }
        }
      }
      .expert-top-text-img {
        float: right;
        height: 100%;
        width: 25%;
        // background: rgb(17, 209, 20);
        text-align: center;
        img {
          height: 70px;
          width: 70px;
          border-radius: 50px;
        }
        button {
          width: 70px;
          border: none;
          background: #ebfaf0;
          color: #39d167;
          border-radius: 50px;
        }
      }
    }
    .expert-top-bth {
      height: 50px;
      width: 100%;
      // background-color: yellow;
      padding: 0 10px;
      span {
        float: left;
        height: 20px;
        width: 70px;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
        margin-right: 5px;
        margin-top: 5px;
        background-color: #f3f8fe;
        color: #308ce8;
      }
      .ban {
        float: left;
        background-color: #f7e9d2;
        color: #91632f;
      }
      .ben {
        float: left;
        background-color: #fff6f3;
        color: #ff6134;
      }
    }
  }
  .expert-top-an {
    height: 40px;
    width: 100%;
    // background-color: yellow;
    padding: 8px 5px;
    span {
      // background-color: red;
      font-size: 12px;
      // margin-right: 30px;
      margin-right: 10px;
      // border: 1px solid red;
      img {
        height: 12px;
        width: 13px;
        margin-right: 5px;
      }
    }
  }
  .expert-top-consult {
    height: 120px;
    width: 100%;
    // background-color: orange;
    margin-bottom: 10px;

    .expert-top-consult-text {
      float: left;
      height: 120px;
      width: 24%;
      background-color: #fff;
      margin-right: 3px;
      text-align: center;
      border-radius: 5px;

      img {
        height: 25px;
        width: 30px;
        margin-top: 20px;
      }
      div {
        font-size: 14px;
      }
      .text-pan {
        font-size: 12px;
        color: #999;
      }
    }
    .expert-top-consult-tu {
      float: left;
      height: 120px;
      width: 24%;
      background-color: #fff;
      margin-right: 3px;
      margin-right: 3px;
      text-align: center;
      border-radius: 5px;
      img {
        height: 25px;
        width: 30px;
        margin-top: 20px;
      }
      div {
        font-size: 14px;
      }
      .text-pan {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .expert-top-ditch {
    height: 90px;
    width: 100%;
    background-color: gold;
    margin-bottom: 10px;
  }
  .expert-top-good {
    height: 100%;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    .expert-top-good-head {
      height: 30px;
      width: 100%;
      // background-color: #308ce8;
      line-height: 30px;
      .good-head-left {
        float: left;
        font-weight: bold;
      }
      .good-head-right {
        float: right;
        font-size: 13px;
        color: #666;
      }
    }
    .expert-top-good-text {
      height: 50px;
      width: 100%;
      // background-color:blue;
      line-height: 20px;
      margin-top: 5px;
      overflow: auto;
      p {
        font-size: 13px;
        color: #666;
      }
    }
  }
  .expert-top-you {
    height: 100%;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    .ya {
      height: 30px;
      width: 100%;
      // background-color:#308ce8;
      line-height: 30px;
      font-weight: bold;
      padding: 0 10px;
    }
    .expert-top-you-text {
      height: 100%;
      width: 100%;
      // background-color: #02f617;
      padding: 10px;
      p {
        font-size: 14px;
        margin-bottom: 5px;
      }
    }
  }
  .expert-top-ask {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;

    .top-ask-text {
      height: 100%;
      width: 100%;
      // background-color: orange;
      border-bottom: 2px solid #f4f4f4;
      padding: 10px;
      .top-ask-text-shu {
        height: 20px;
        width: 100%;
        // background-color: red;
        line-height: 20px;
        span {
          float: left;
          font-size: 12px;
          margin-right: 10px;
        }
        .text-phone {
          font-size: 14px;
          font-weight: bold;
        }
        .text-tu {
          width: 30px;
          text-align: center;
          color: #308ce8;
          background-color: #f2f8fd;
        }
        .text-man {
          width: 30px;
          text-align: center;
          color: #ff6134;
          background-color: #fff6f0;
        }
        .text-yun {
          float: right;
          color: #d4c7c2;
        }
      }
      .top-ask-text-zi {
        height: 30px;
        width: 100%;
        // background-color: blueviolet;
        line-height: 30px;
        color: #ebebeb;
        span {
          color: #999;
          font-size: 14px;
        }
      }
      .top-ask-p {
        height: 30px;
        width: 100%;
        // background-color: blue;
        line-height: 30px;
        font-size: 13px;
        white-space: nowrap; /* 文本不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 溢出部分显示省略号 */
      }
      .top-ask-text-wen {
        height: 50px;
        width: 100%;
        background-color: #f8f8f8;
        padding: 10px;
        p {
          font-size: 13px;
          line-height: 18px;
        }
      }
    }
  }
  .ask-top {
    height: 30px;
    width: 100%;
    // background-color: #308ce8;
    line-height: 30px;
    .ask-left {
      float: left;
      font-weight: bold;
    }
    .ask-right {
      float: right;
      font-size: 13px;
    }
  }
  .expert-top-tom {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    .expert-top-tom-head {
      height: 30px;
      width: 100%;
      line-height: 30px;
      .head-left {
        float: left;
        font-weight: bold;
      }
      .head-right {
        float: right;
        font-size: 13px;
        color: #999;
      }
    }
    .expert-top-tom-wen {
      height: 60px;
      width: 100%;
      // background-color: #fff;
      margin-bottom: 3px;

      .expert-top-tom-text {
        height: 30px;
        width: 100%;
        // background-color: #ff6134;
        line-height: 30px;
        span {
          font-size: 13px;
        }
      }

      .expert-top-tom-ta {
        height: 30px;
        width: 100%;
        // background-color: #26ff16c3;
        line-height: 30px;
        color: #999;

        .tom-ta-left {
          float: left;
          span {
            font-size: 12px;
          }
        }
        .tom-ta-right {
          float: right;
          span {
            font-size: 12px;
            padding: 0 10px;
          }
        }
      }
    }
  }

  .xinyi {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    display: flex;
    background-color: #fff;
    .xinyi1 {
      width: 80px;
      height: 100px;
      text-align: center;
      .icon {
        color: red;
        font-size: 25px;
        margin-top: 20px;
      }
      p {
        font-size: 14px;
      }
    }
    .btn {
      width: 280px;
      height: 50px;
      background: #39d167;
      margin-top: 20px;
      border-radius: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }


}
</style>